<template>
	<div class="login-cont">
		<div class="login-bg"></div>
		<div class="form">
			<div class="login-text">
				<div class="login-text-cn">
					用户登录
				</div>
				<div class="login-text-en">
					User Login
				</div>
			</div>
			<div class="form-item">
				<van-field v-model="username" clearable name="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]">
					<template slot="left-icon">
						<span class="solts" @click="switchPasswordType">
							<img src="../../static/login/icon-user.png" alt="">
						</span>
					</template>
				</van-field>
			</div>
			<div class="form-item">
				<van-field v-model="password" name="密码" :type="passwordType" placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码' }]">
					<template slot="left-icon">
						<span class="solts">
							<img src="../../static/login/locked.png" alt="">
						</span>
					</template>
					<template slot="right-icon">
						<span class="solts" @click="switchPasswordType">
							<van-icon name="closed-eye" v-if="passwordType==='password'" />
							<van-icon name="eye" v-else />
						</span>
					</template>
				</van-field>
			</div>
			<div class="form-item">
				<van-field v-model="verifyCode" name="验证码" id="code-ipt"  placeholder="请填写验证码" :rules="[{ required: true, message: '请填写验证码' }]">
					<template slot="left-icon">
						<span class="solts">
							<img src="../../static/login/icon-yzm.png" style="width:14px;height:16px">
						</span>
					</template>
				</van-field>
				<!-- <img :src="verImg" class="code-img" @click="getVerifyCode"> -->
				<van-image class="code-img" :src="verImg" @click="getVerifyCode">
					<template v-slot:loading>
						<van-loading type="spinner" size="20" />
					</template>
				</van-image>

			</div>
			<div class="remember-forget">
				<div class="remember" @click="check_remember=!check_remember">
					<van-checkbox v-model="check_remember" icon-size="17px" shape="square" checked-color="#047bfc">记住密码</van-checkbox>
				</div>
				<div class="forget" @click="toResetPassword">
					忘记密码
				</div>
			</div>

			<div class="login-btn" @click="handleLogin">
				登录
			</div>
		</div>

		<div class="select-box" v-if="schoolShow">
		</div>
	</div>
</template>

<script>
export default {
	name: "login",
	data() {
		return {
			username: localStorage.getItem("username") || "20180645",
			password: localStorage.getItem("password") || "Heliyuan2000",
			verifyCode: "",
			check_remember: false,
			verImg: "",
			schoolId: "",
			schoolShow: false,
			schoolList: [],
			passwordType: "password",
		};
	},
	methods: {
		switchPasswordType() {
			this.passwordType =
				this.passwordType === "password" ? "text" : "password";
		},
		toResetPassword() {
			// 跳转到内部窗⼝并且传递链接
			// uni.navigateTo({
			// 	url: `/pages/webview/webview?url=` + ''
			// })
		},
		checkLogin() {
			// uni.$http.post('/portal/login/checkLogin').then((res) => {
			// 	if (res.code === 1) {
			// 		uni.reLaunch({
			// 			url: '/pages/majorClass/majorClass'
			// 		})
			// 	} else if (res.code === -1) {
			// 		uni.clearStorageSync()
			// 	}
			// });
		},
		getVerifyCode() {
			this.$api.login.verifyCode().then((res) => {
				window.console.log(res);
				this.verImg =
					"data:image/png;base64," +
					btoa(
						new Uint8Array(res).reduce(
							(data, byte) => data + String.fromCharCode(byte),
							""
						)
					);
			});
		},
		handleLogin() {
			this.$api.login
				.login({
					userName: this.username,
					password: this.password,
					schoolId: this.schoolId || "",
					verifycode: this.verifyCode,
				})
				.then((res) => {
					if (res.code > 0) {
						// window.console.log("data,", res);
						this.$toast(res.msg);
						if (this.check_remember) {
							localStorage.setItem("username", this.username);
							localStorage.setItem("password", this.password);
						}
						if (res.url == "current") {
							this.getList();
							this.getBacthList();
						} else {
							this.$router.push({
								name: res.url,
								params: {},
							});

							localStorage.setItem("userName", res.userName);
							localStorage.setItem("userId", res.userId);
							localStorage.setItem("schoolName", res.schoolName);
							localStorage.setItem("schoolId", res.schoolId);
							localStorage.setItem("displayName", res.displayName);
							localStorage.setItem("token", res.token);
							localStorage.setItem("userType", res.userType);
							localStorage.setItem("avatorUrl", res.avatorUrl);
							localStorage.setItem("remenberMe", res.remenberMe);
							localStorage.setItem("logoUrl", res.logoUrl);
						}
					} else if (res.code == -100) {
						// uni.$msg(res.msg)
						this.$toast(res.msg, "error");
						this.getSchoolList();
						this.schoolShow = true;
					} else {
						if (res.code == -2 || res.code == -1) {
							this.getVerifyCode();
							this.verifyCode = "";
							window.console.log(res.msg);
							// uni.$msg(res.msg, 'error')
							this.$toast(res.msg);
						}
					}
				});
		},
	},
	mounted() {
		this.getVerifyCode();
	},
};
</script>

<style scoped lang="less">
@import "login.less";
</style>